<script setup lang="ts">
import user from '@/store/user';
import { ref } from 'vue';
const { userInfo } = user;
const orderData = ref([
	{
		icon: 'compose',
		title: '任务列表',
		path: '/pages/home/home',
		subscript: 0
	},
	{
		icon: 'upload',
		title: '影像上传',
		path: '/pages/wallet/wallet',
		subscript: 0
	},
	{
		icon: 'wallet',
		title: '施工日志',
		path: '/pages/wallet/wallet',
		subscript: 0
	}
]);
const listData = ref([
	{ icon: 'home', name: '我的项目' },
	{ icon: 'home', name: '我的任务' },
	{ icon: 'home', name: '我的收藏' },
	{ icon: 'home', name: '我的消息' },
	{ icon: 'info-filled', name: '关于我们' }
]);
//设置
function setUpClick() {}

function onClickLayout() {
	uni.showModal({
		title: '提示',
		content: '确定退出登录吗？',
		success: async (res) => {
			if (res.confirm) {
				await user.logout();
			}
		}
	});
}
</script>

<template>
	<view class="personal-center">
		<!-- 头像和设置 -->
		<view class="avatar-box">
			<view class="avatar-area">
				<view class="avatar">
					<image class="avatar-img" mode="aspectFit" src="/static/home/attendance.png" alt="" />
				</view>
				<view class="name-area">
					<view class="name">{{ userInfo.name }}</view>
					<view class="autograph">{{ userInfo.projectName }}</view>
				</view>
				<!-- 设置 -->
				<view class="settings-icon" @click="setUpClick">
					<uni-icons type="gear" color="#999" size="34"></uni-icons>
				</view>
			</view>
		</view>
		<scroll-view class="main" :scroll-y="true">
			<!-- 我的代办 -->
			<view class="my-todo">
				<view class="order-label">我的代办</view>
				<view class="order-classification">
					<view v-for="(item, index) in orderData" :key="index" class="order-item" @click="orderClick(item.path)">
						<view v-if="item.subscript" class="my-badge">{{ item.subscript }}</view>
						<uni-icons :type="item.icon" color="#000" size="32"></uni-icons>
						<view class="title">{{ item.title }}</view>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="personal-center-list">
				<view class="item-list" v-for="(item, index) in listData" :key="index">
					<view class="item">
						<view class="item-left">
							<uni-icons :type="item.icon" size="25"></uni-icons>
							<view class="left-name">{{ item.name }}</view>
						</view>
						<view class="item-right">
							<uni-icons type="right" size="28" color="#9D9D9D"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<button class="layout" @click="onClickLayout">退出登录</button>
		</scroll-view>
	</view>
</template>

<style scoped lang="scss">
.personal-center {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 60px);
	/* #endif */
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	overflow-y: auto;
}
.main {
	flex: 1;
	height: 1px;
	padding: 20rpx;
	background-color: #edf0f9;
	box-sizing: border-box;
	padding-bottom: 60rpx;
}
.avatar-area {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28rpx 20rpx;
	background: rgba(255, 255, 255, 0.5);
	background: #c0cef5;
	border-radius: 20px;
	z-index: 999;
}
.avatar-box {
	background-color: v-bind(mainColor);
	padding: 60px 20rpx;
	padding-bottom: 40px;
}

.avatar-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.name-area {
	height: 120rpx;
	margin-left: 30rpx;
	color: #000;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.name {
	font-size: 35rpx;
	font-weight: bold;
	margin-bottom: 5rpx;
}
.autograph {
	margin-top: 20rpx;
	color: #999;
}
.settings-icon {
	right: 25rpx;
	top: 10rpx;
}

.my-todo {
	background: #fff;
	box-shadow: 0 4rpx 9rpx rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.order-label {
	padding: 20rpx;
	font-weight: 500;
	border-bottom: 1px solid #999988;
}

.order-classification {
	display: flex;
	justify-content: space-evenly;
}

.order-item {
	min-width: 120rpx;
	padding: 50rpx 0;
	text-align: center;
	font-size: 27rpx;
}

.my-badge {
	width: 25rpx;
	height: 25rpx;
	background: #ec6e2d;
	border-radius: 50%;
	position: absolute;
	margin-left: 67rpx;
	margin-top: -6rpx;
	font-size: 16rpx;
	color: #fff;
}

.title {
	margin-top: 10rpx;
	color: #686868;
}

.personal-center-list {
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx;
	box-shadow: 0 4rpx 9rpx rgba(0, 0, 0, 0.1);
	border-radius: 20px;
}

.item-list {
	width: 100%;
}

.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 15rpx;
}

.item-left {
	display: flex;
	align-items: center;
}

.left-name {
	color: #606060;
	font-size: 28rpx;
	margin-left: 15rpx;
}

.layout {
	margin-top: 20rpx;
	border-radius: 20rpx;
	background-color: v-bind(mainColor);
	color: #fff;
}
</style>
